<template>
  <div class="center-info">
    <div class="head">我的论坛</div>
    <div class="card">
      <div class="tab">
        <div
          class="tab-item"
          @click="selectTabFun(item, index)"
          :class="{ 'tab-item-active': tabCurrent == index }"
          v-for="(item, index) in tabList"
          :key="index"
        >
          {{ item.name }}

          <span class="tab-num">
            （{{ item.num || 0 }}）
            </span>
        </div>
      </div>

      <forumTem1Wrap v-if="tabCurrent == 0"></forumTem1Wrap>
      <forumTem2Wrap v-if="tabCurrent == 1"></forumTem2Wrap>
      <forumTem3Wrap v-if="tabCurrent == 2"></forumTem3Wrap>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from "@/api/common";

import forumItem from "./components/forum-item.vue";
import forumTem1Wrap from "./template/forum-tem1.vue";
import forumTem2Wrap from "./template/forum-tem2.vue";
import forumTem3Wrap from "./template/forum-tem3.vue";
export default {
  components: {
    forumItem,
    forumTem1Wrap,
    forumTem2Wrap,
    forumTem3Wrap,
  },
  data() {
    return {
      tabCurrent: 0,
      userInfo: {},
    };
  },

  computed: {
    tabList() {
      let tabList = [
        //
        { name: "我的发布", num: this.userInfo.fb_num },
        { name: "我的评论", num: this.userInfo.comment_num },
        { name: "我的点赞", num: this.userInfo.like_num },
      ];
      return tabList;
    },
  },
  created() {
    this.setView();
  },

  methods: {
    setView() {
      getUserInfo().then((res) => {
        if (res.code == 200) {
          console.warn("用户信息res.data", {...res.data});
          this.userInfo = res.data;
        }
      });
    },
    selectTabFun(item, index) {
      this.tabCurrent = index;
      // console.log(item,index)
    },
  },
};
</script>

<style lang="less" scoped>
.center-info {
  .card {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0px 0px 0.15rem 0.0125rem rgba(0, 0, 0, 0.08);

    .tab {
      display: flex;
      width: 100%;
      height: 0.9rem;
      background: #edf3ff;

      .tab-item {
        position: relative;
        font-size: 0.2rem;
        color: #000;
        padding: 0 0.5rem;
        line-height: 0.9rem;
        cursor: pointer;
        user-select: none;

        .tab-num {
            // font-size: 14px;

        }
      }

      .tab-item-active {
        &::after {
          content: "";
          display: block;
          width: 0.5rem;
          height: 0.025rem;
          background: #4f8af8;
          position: absolute;
          bottom: 0.1875rem;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: center;
      padding: 0 0.375rem 1rem;
    }

    .list {
      padding: 0.3rem 0.5rem;
    }
  }
}
</style>
